<template>
  <div class="login-box" @keyup.enter="submitForm(ruleFormRef)">
    <div class="login-content">
      <img src="../assets/images/login/loginBg.png" alt="image">
      <div class="bg"></div>
      <div class="content">
        <div class="content-header">
          <img src="../assets/images/login/logo.png" alt="logo">
          <p>金圣龙后台服务管理系统</p>
        </div>
        <div class="content-info">
          <el-form :model="ruleForm" ref="ruleFormRef" style="max-width: 600px" :rules="rules">
            <el-form-item prop="username">
              <i class="iconfont icon-yonghuming"></i>
              <el-input v-model="ruleForm.username" placeholder="请输入手机号/用户名" />
            </el-form-item>
            <el-form-item prop="password">
              <i class="iconfont icon-mima-1"></i>
              <el-input :type="yanFlag ? 'password' : 'text'" v-model="ruleForm.password" placeholder="请输入密码" />
              <i @click="yanFlag = !yanFlag"
                :class="[yanFlag ? 'iconfont icon-yanjing yanjing' : 'iconfont icon-yanjing1 yanjing']"></i>

            </el-form-item>
            <el-form-item prop="captcha" v-if="captchaEnabled">
              <div class="captcha-box">
                <div class="captcha-left">
                  <i class="iconfont icon-anquan1"></i>
                  <el-input v-model="ruleForm.captcha" placeholder="请输入验证码" />
                </div>
                <div class="captcha-right" @click="getCodeImgImg" v-if="captchaImg">
                  <img :src="captchaImg" alt="">
                </div>
              </div>
            </el-form-item>

            <el-button class="btn" :loading="loading" size="large" type="primary" style="width:100%;"
              @click.prevent="submitForm(ruleFormRef)">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// 加密  解密
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
// 获取验证码  登录
import { getCodeImg } from "@/api/login"


let router = useRouter()
let route = useRoute()
// 实例化仓库
const userStore = useUserStore()
// 验证码图片
let captchaImg = ref('')
// 登录状态
let loading = ref(false)
// 验证码开关
let captchaEnabled = ref(true)
// 表单实例
const ruleFormRef = ref()
// 路由
const redirect = ref(undefined);
// 表单数据
const ruleForm = reactive({
  username: '',
  password: '',
  // username: 'admin',
  // password: 'admin123',
  captcha: '',
  uuid: ''
})
// 控制密码眼睛显示隐藏
let yanFlag = ref(true)
// 监听用户从哪里过来
watch(route, (newRoute) => {
  redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });
// 用户账号校验
const validateUser = (rule, value, callback) => {
  if (value === '')  callback(new Error('账号名不能为空'))
  callback()
}
// 密码校验
const passwordValidate = (rule, value, callback) => {
  if (!value)  callback(new Error('密码不能为空'))

  if (value.length < 5) {
    return callback(new Error('密码不能小于5位'))
  } else if (value.length > 25) {
    return callback(new Error('密码不能超过25位'))
  }
  callback()
}

// 验证码校验
const validatecaptcha = (rule, value, callback) => {
  if (!value) callback(new Error('验证码不能为空'))
  callback()
}

// 自定义校验规则
const rules = reactive({
  username: [{ validator: validateUser, trigger: 'blur' }],
  password: [{ validator: passwordValidate, trigger: 'blur' }],
  captcha: [{ validator: validatecaptcha, trigger: 'change' }],
})

// 提交账号
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      let params = {
        username: ruleForm.username,
        password: ruleForm.password,
        code: ruleForm.captcha,
        uuid: ruleForm.uuid
      }
      // 调用action的登录方法
      userStore.login(params).then(() => {
        const query = route.query;
        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur];
          }
          return acc;
        }, {});
        router.push({ path: redirect.value || "/", query: otherQueryParams });
      }).catch(() => {
        loading.value = false;
        // 重新获取验证码
        if (captchaEnabled.value) {
          getCodeImgImg();
        }
      })
    }
  })
}
// 获取验证码图片
const getCodeImgImg = async () => {
  let res = await getCodeImg()
  captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
  let { code, img, msg, uuid } = res
  if (code === 200 && captchaEnabled.value) {
    captchaImg.value = 'data:image/gif;base64,' + img
    ruleForm.uuid = uuid
  }
}

onMounted(() => {
  getCodeImgImg()
})
</script>
<style lang='scss'>
.login-box {
  width: 100%;
  height: 100vh;
  background: #031561;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    img {
      width: 575px;
      height: 553px;
    }

    .content {
      // csss实现四角边框
      background: linear-gradient(#0033ff, #0033ff) left top,
        linear-gradient(#0033ff, #0033ff) left top,
        linear-gradient(#0033ff, #0033ff) right top,
        linear-gradient(#0033ff, #0033ff) right top,
        linear-gradient(#0033ff, #0033ff) left bottom,
        linear-gradient(#0033ff, #0033ff) left bottom,
        linear-gradient(#0033ff, #0033ff) right bottom,
        linear-gradient(#0033ff, #0033ff) right bottom;
      background-repeat: no-repeat;
      background-size: 3px 1.5vw, 1.5vw 3px;
      box-shadow: 0px 0px 3px rgb(173, 173, 173) inset;
      padding: 61px;
      width: 443px;
      height: 526px;
      box-shadow: inset 1px 1 1px 1px #FFFFFF;
      border-radius: 0px 0px 0px 0px;
      opacity: 0.85;
      margin: 198px 59px;

      .content-header {
        display: flex;
        align-items: center;

        img {
          width: 42px;
          height: 42px;
          border-radius: 0px 0px 0px 0px;
          margin-right: 20px;
        }

        p {
          width: 231px;
          height: 7px;
          font-family: PingFang SC, PingFang SC;
          font-size: 21px;
          line-height: 0px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          color: #fff;

        }
      }

      .content-info {
        margin-top: 88px;

        .el-form {
          .el-form-item__content {
            position: relative;
 
            .icon-anquan1,
            .icon-yonghuming,
            .icon-mima-1 {
              position: absolute;
              color: #0B38AC;
              font-size: 20px;
              top: 2px;
              left: 6px;
              z-index: 100;
            }

            .icon-anquan1{
              top: 4px !important;
            }

            .yanjing {
              position: absolute;
              color: #666;
              right: 10px;
              top: 2px;
              z-index: 1000;
            }

            .el-input {
              input {
                padding-left: 20px;
              }
            }
            
          }

          .captcha-box {
            display: flex;
            height: 32px;
            align-items: center;
            position: relative;

            .captcha-left {
              .icon-anquan1 {
                position: absolute;
                top: 2px;
                color: #0B38AC;
                z-index: 100;
                left: 6px;

              }

              input {
                padding-left: 20px;
              }
            }

            .captcha-right {
              width: 70%;
              height: 100%;
              margin-left: 16px;

              img {
                width: 92px;
                height: 34px;
              }
            }
          }

          .btn {
            width: 289px;
            height: 45px;
            background: #0033ff;
            border-radius: 4px 4px 4px 4px;
            border: none;
            color: #fff;
            margin-top: 52px;
          }
        }
      }
    }
  }
}
</style>